<template>
<div>
      <!-- 一条文章单元格 -->
  <van-cell @click="tiaozhuande">
    <!-- 标题区域的插槽 -->
    <template #title>
      <div class="title-box">
        <!-- 标题 -->
        <span>{{ item.title }}</span>
        <!-- 单图 -->
        <img
          class="thumb"
          v-lazy="item.cover.images[0]"
          v-if="item.cover.type === 1"

        />
      </div>
      <!-- 三张图片 -->
      <!-- 如果type等于3就显示这个 -->
      <div v-if="item.cover.type >1" class="thumb-box">
        <img
          class="thumb"
          :src="urlstr"
          v-for="(urlstr, index) in item.cover.images"
           v-lazy="urlstr"
          :key="index"
        />
      </div>
    </template>
    <!-- label 区域的插槽 -->
    <template #label>
      <div class="label-box">
        <span>{{ item.aut_name }}</span>
        <span>{{ item.comm_count }}评论</span>
        <span>{{ item.pubdate }}</span>
        <!-- 反馈按钮 -->
        <van-icon name="cross"  @click.stop="crossFn" v-if="clsshow"/>
      </div>
    </template>
  </van-cell>
   <!-- 底部反馈面板 -->
    <van-action-sheet v-model="show"  @cancel="cancelFn" :actions="actions" @select="onSelect"  :cancel-text="cancelText" get-container="body"/>
</div>
</template>

<script>
// 引入好面板上的文字
import { firstActions, secondActions } from '@/api/report'

export default {
  data () {
    return {
      show: false, // 底部反馈面板是否显示
      actions: firstActions, // 默认显示一级面板
      cancelText: '取消'
    }
  },

  methods: {
    onSelect (action) {
      if (action.name === '反馈垃圾内容') {
        this.cancelText = '返回'
        this.actions = secondActions
      } else if (action.name === '返回') {
        this.actions = this.firstActions
      } else if (action.name === '拉黑作者') {
      } else {
        this.$emit('remove', this.item, action)
        this.show = false
      }
    },
    // 反馈按钮点击
    crossFn () {
      this.show = true // 反馈面板出现
    },
    cancelFn () {
      if (this.cancelText === '返回') {
        this.cancelText = '取消'
        this.actions = firstActions
        this.show = true
      }
    },
    // 跳转到文章详情
    tiaozhuande () {
      this.$router.push({
        path: `/article?aid=${this.item.art_id}`
      })
    }
  },
  props: {
    item: {
      type: Object,
      default () {
        return {}
      }
    },
    clsshow: {
      type: Boolean,
      default: true
    }
  }
}
</script>

<style scoped lang="less">
/* 标题样式 */
.title-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* label描述样式 */
.label-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 图片的样式, 矩形黄金比例：0.618 */
.thumb {
  width: 113px;
  height: 70px;
  background-color: #f8f8f8;
  object-fit: cover;
}

/* 三图, 图片容器 */
.thumb-box {
  display: flex;
  justify-content: space-between;
}
</style>
